<template>
  <div class="container">
    <div class="wrapright MobileHide">
      <div
        class="siderBox"
        :class="{acticeFlex: leaveHead}">
        <sider-moudel
            :fields='fields'
        ></sider-moudel>
      </div>
    </div>
    <div class="wrapleft">
      <div class="searchResult">
        <div class="MobileSearchInput MobileShow">
          <el-input placeholder="搜索感兴趣的句子" v-model="searchInput" class="input-with-select">
            <el-select v-model="searchTypeVal" slot="prepend" placeholder="类 型" @change="searchTypeChange">
              <el-option v-for="(item,key) in searchType" :key="key" :label="item.name" :value="item.value">{{item.name}}</el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="handMobileSearch()"></el-button>
          </el-input>
        </div>
        <!-- 搜索句子 -->
        <div class="searchResultMain" v-if="['sentence', 'tag'].includes(sentenceType)">
          <p class="searchInfo" v-if='searchResultCount'>共搜索到<span> {{searchResultCount}} </span>条，关于 <span>“{{$route.query.keyword}}”</span> 的{{searchTypeTag}}</p>
          <div class="sentence">
            <sentence-item v-for="(item, key) in searchResult" :key="key" :item='item'></sentence-item>
          </div>
          <div class="pageComponent">
            <el-pagination
              :hide-on-single-page="true"
              background
              :current-page='Number(this.$route.query.pn) || 1'
              layout="prev, slot, next"
              @current-change="goCurrentPage"
              :total="searchResultCount">
              <div class="pagerInfo">
                  <button>{{Number(this.$route.query.pn) || 1}} / {{searchResultMaxPage}}</button>
              </div>
            </el-pagination>
          </div>
        </div>
        <!-- 搜索标签 -->
        <div class="searchResultMain" v-if="sentenceType === 'special'">
          <p class="searchInfo" v-if='searchResultCount'>共搜索到<span> {{searchResultCount}} </span>条，关于 <span>“{{$route.query.keyword}}”</span> 的{{searchTypeTag}}</p>
          <div class="sentence">
            <ul>
              <li v-for="(item, key) in searchResult" :key="key">
                <nuxt-link :to="`/special/${item.sid}`">{{item.title}}</nuxt-link>
              </li>
            </ul>
          </div>
          <div class="pageComponent">
            <el-pagination
              :hide-on-single-page="true"
              background
              :current-page='Number(this.$route.query.pn) || 1'
              layout="prev, slot, next"
              @current-change="goCurrentPage"
              :total="searchResultCount">
              <div class="pagerInfo">
                  <button>{{Number(this.$route.query.pn) || 1}} / {{searchResultMaxPage}}</button>
              </div>
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters, mapActions} from 'vuex'
import scrollEvent from '~/mixins/scrollEvent';
import siderMoudel from '~/components/layout/siderMoudel.vue';
import sentenceItem from '~/components/module/sentence.vue';
export default {
    name: 'search',
    layout: 'current',
    scrollToTop: true,
    mixins: [scrollEvent],
    watchQuery: ['keyword', 'type', 'pn'],
    async asyncData({ query, store }) {
      if (query.keyword && query.keyword !== store.state['sentence'].searchVal) {
        store.commit('sentence/UPDATE_SEARCH_VAL', query.keyword);
      }
      await store.dispatch('sentence/getSearchResult', query);
      return {
        searchTypeVal: query.type || '',
        searchInput: query.keyword || ''
      }
    },
    data() {
        return {
            fields: ['search']
        };
    },
    components: {
        siderMoudel, sentenceItem
    },
    computed: {
        ...mapGetters('sentence', ['searchResult', 'searchVal', 'searchResultCount', 'searchResultMaxPage']),
        ...mapGetters(['searchType']),
        searchTypeTag() {
          let searchItem = this.searchType.filter(item => item.value === this.$route.query.type);
          if (searchItem.length === 1) {
            return searchItem[0].name;
          }
          return this.$route.query.type;
        },
        sentenceType() {
          return this.$route.query.type || '';
        }
    },
    watch: {
        searchInput() {
            if (this.searchVal !== this.searchInput) {
                this.updateSearchVal(this.searchInput);
            }
        }
    },
    methods: {
      ...mapMutations('sentence', {
          updateSearchVal: 'UPDATE_SEARCH_VAL'
      }),
      goCurrentPage(page) {
        let linkPath = {
            path: this.$route.path,
            query: {
                ...this.$route.query,
                pn: page
            }
        };
        this.$router.push(linkPath);
      },
      handSearch(type) {
          let query = {};
          this.searchInput ? query.keyword = this.searchInput : '';
          type ? query.type = type : '';
          this.$router.push({name: 'search', query: query})
      },
      handMobileSearch() {
        this.handSearch(this.searchTypeVal);
      },
      searchTypeChange(event) {
        this.handSearch(event);
      }
    },
    mounted() {
      if (this.$route.query.keyword !== this.searchVal) {
        this.updateSearchVal(this.$route.query.keyword);
      }
      this.searchInput = this.searchVal;
      this.searchTypeVal = this.$route.query.type || '';
    }
}
</script>
